<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-center">
      <el-row class="JNPF-common-search-box" :gutter="16">
        <el-form @submit.native.prevent label-width="80px" label-position="left">
          <el-col :span="8">
            <el-form-item label="客户名称">
              <el-select v-model="listQuery.fsiteNo" :disabled="this.$store.state.user.fsiteLevel == 3" clearable filterable
                placeholder="请选择客户名称">
                <el-option v-for="item in fsiteNoBelongOptions" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="储物柜">
              <el-select v-model="listQuery.fcabbarcode" class="filter-item" clearable placeholder="请选择储物柜">
                <el-option v-for="item in cablists" :key="item.index" :label="item.fequipmenttag"
                  :value="item.fequipmentbarcode" />
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="showAll">
            <el-col :span="8">
            <el-form-item label="储物仓 ">
              <el-select v-model="listQuery.fboxbarcode" class="filter-item" clearable placeholder="请选择储物仓">
                <el-option v-for="item in stocklists" :key="item.value" :label="item.fequipmenttag"
                  :value="item.fequipmentbarcode" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="容器标签">
              <el-input v-model="listQuery.frfidbarcode" clearable class="filter-item" placeholder="请输入RFID" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料编号">
              <el-input v-model="listQuery.fgoodno" class="filter-item" clearable placeholder="请输入物料编号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物料批号">
              <el-input v-model="listQuery.fbatch" class="filter-item" clearable placeholder="请输入物料批号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
             <el-form-item>
              <el-radio v-model="listQuery.ftype" label="1">当前数据</el-radio>
              <el-radio v-model="listQuery.ftype" label="2">历史数据</el-radio>
             </el-form-item>
          </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="handleFilter">查找</el-button>
              <el-button type="info" @click="handleExport"> 导出</el-button>
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll=true"
                v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll=false" v-else>
                收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="JNPF-common-layout-main JNPF-flex-main">
       <!-- 查询结果 -->
          <JNPF-table v-loading="listLoading" :data="list" stripe>
            <el-table-column align="center" label="操作" class-name="small-padding">
              <template slot-scope="scope">
                <el-button type="text"@click="detailDialog(scope.row)">明细</el-button>
              </template>
            </el-table-column>
            <el-table-column width="60" :index="indexMethod" align="center" label="序号" type="index" />
            <el-table-column width="130" align="left" label="储物柜名称" prop="fcabname" />
            <el-table-column width="130" align="left" label="储物仓名称" prop="fequipmenttag" />
            <el-table-column align="left" label="批次号" width="180" prop="fbatch" />
            <el-table-column align="left" label="容器标签" width="180" prop="frfidbarcode" />
            <!--<el-table-column :width="buttonColor.billno" align="left" label="物料编号" prop="fgoodno"/>-->
            <el-table-column width="130" align="left" label="物料名称" prop="fgoodname" />
            <el-table-column width="80" align="left" label="物料状态" prop="fstate" />
            <el-table-column width="100" align="left" label="报废日期" prop="fprocdate" />
            <el-table-column align="center" label="进" prop="f1" width="90" />
            <el-table-column align="center" label="出" prop="f2" width="90" />
            <el-table-column align="center" label="损" prop="f3" width="90" />
            <el-table-column v-if="isActive" align="center" label="退" prop="f4" width="90" />
            <el-table-column align="center" label="物料剩余量" prop="f5" />
          </JNPF-table>
          <paginations
            :total="total"
            :page.sync="listQuery.currentPage"
            :limit.sync="listQuery.pageSize"
            />
      </div>
    </div>
     <el-dialog 
      :close-on-click-modal="false"
       :fullscreen="true"
        title="详细信息"  
      :visible.sync="detailVisible">
      <el-tabs type="border-card">
        <el-tab-pane label="头表" :style="{height:screenHeight-230+'px'}">
          <el-row class="JNPF-common-search-box" :gutter="16">
            <el-form @submit.native.prevent label-width="80px" label-position="left">
              <el-col :span="6">
                <el-form-item label="储物柜">
                  <el-input disabled v-model="detailQueryList.fcabname" clearable  placeholder="暂无储物柜" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="储物仓" >
                  <el-input disabled v-model="detailQueryList.fequipmenttag" clearable class="filter-item"
                    placeholder="暂无储物仓" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="物料编号" >
                  <el-input disabled v-model="detailQueryList.fgoodno" clearable class="filter-item" placeholder="暂无物料编号" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="物料名称">
                  <el-input disabled v-model="detailQueryList.fgoodname" clearable class="filter-item" placeholder="暂无物料名称" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item  label="容器标签">
                  <el-input disabled v-model="detailQueryList.frfidbarcode" clearable class="filter-item"
                    placeholder="暂无容器标签" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item  label="物料批号">
                  <el-input disabled v-model="detailQueryList.fbatch" clearable class="filter-item" placeholder="暂无物料批号" />
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="明细表">
          <JNPF-table v-loading="dialogLoading" :data="dialogList" :height="screenHeight-230">
              <el-table-column :index="indexMethodDetail" align="center" label="序" type="index" prop="time" />
              <el-table-column width="160" align="center" label="业务日期" prop="fupddate" />
              <el-table-column align="center" label="操作人员" prop="username" />
              <el-table-column align="center" label="业务类型" prop="fdictname" />
              <el-table-column align="center" label="数量" prop="fqty" />
            </JNPF-table>
        </el-tab-pane>
      </el-tabs>
      </el-dialog>
  </div>
</template>
<script>
import { listwarehouseInv, stocklist, listtsCabinet, listDetail } from "@/api/warehouseInv";
import { fsiteOptionsByLevel } from "@/api/area";
import Pagination from "@/components/Pagination";
import moment from 'moment'
import { tableColor, buttonColor, titleColor } from "@/filters/index";
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  name: "ITcGoodInv",
  components: { Pagination },
  data() {
    return {
      screenHeight: document.body.clientHeight,
      fsiteNoBelongOptions: [], // 客户列表
      dialogList: [],
      dialogLoading: false,
      detailVisible: false,
      detailQueryList: {
        fcabname: undefined,
        fequipmenttag: undefined,
        fgoodno: undefined,
        fgoodname: undefined,
        frfidbarcode: undefined,
        fbatch: undefined,
      },
      showAll:false,
      list: null,
      isActive: false,
      total: 0,
      test: undefined,
      stocklists: undefined,
      cablists: undefined,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: this.$store.state.user.fsiteNo,
        fbatch: undefined,
        fboxbarcode: undefined,
        fcabbarcode: undefined,
        fgoodno: undefined,
        fretqty: undefined,
        foperator: undefined,
        fqty: undefined,
        frfidbarcode: undefined,
        fstate: undefined,
        fupddate: undefined,
        ftype: '1',
        sort: "create_time",
        order: "desc",
      },
      stocklistQuery: {
        page: 1,
        limit: -1,
        fsiteNo: this.$store.state.user.fsiteNo,
        sort: "create_time",
        order: "desc",
      },

      dataForm: {
        fbatch: undefined,
        fboxbarcode: undefined,
        fcabbarcode: undefined,
        fgoodno: undefined,
        fretqty: undefined,
        foperator: undefined,
        fqty: undefined,
        frfidbarcode: undefined,
        fstate: undefined,
        fupddate: undefined,
        ftype: undefined,
      },
      tableColor,
      buttonColor,
      titleColor,
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
    };
  },
  created() {
    this.getList();
    this.getstocklist();
    this.cablist();
    // 客户列表
    fsiteOptionsByLevel(3)
      .then(response => {
        this.fsiteNoBelongOptions = response.data.data.list
      })
      .catch(() => {
        this.fsiteNoBelongOptions = []
      })
  },
  methods: {
    handleExport() {
      //  .table要导出的是哪一个表格
      var excelDom = XLSX.utils.table_to_book(document.querySelector(".downtable"), { raw: true });
      var excelType = XLSX.write(excelDom, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        //  name+'.xlsx'表示导出的excel表格名字
        FileSaver.saveAs(
          new Blob([excelType], { type: "application/octet-stream" }), "储物柜库存.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined");
      }
      return excelType;
    },
    //   handleExport(row) {
    //   this.$confirm('是否要导出数据', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     exportXsl(this.dataForm)
    //       .then(response => {
    //         this.$notify.success({
    //           title: '成功',
    //           message: '导出成功'
    //         })
    //       })
    //       .catch(response => {
    //         this.$notify.error({
    //           title: '失败',
    //           message: response.data.msg
    //         })
    //       })
    //   })
    // },
    //获取列表
    getList() {
      this.listLoading = true;
      listwarehouseInv(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    dateFormat(row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },

    //查找
    handleFilter() {
      this.listQuery.page = 1;
      if (this.listQuery.ftype == 1) {
        this.isActive = false
      }
      else {
        this.isActive = true
      }
      this.getList();
    },
    //获取储物仓列表
    getstocklist() {
      stocklist(this.stocklistQuery)
        .then((response) => {
          this.stocklists = response.data.data.list
        })

        .catch(() => {
          this.stocklists = [];
        });
    },
    //获取储物柜列表
    cablist() {
      listtsCabinet(this.stocklistQuery)
        .then((response) => {
          this.cablists = response.data.data.list
        })
        .catch(() => {
          this.cablists = [];
        });
    },

    // 获取详细数据
    detailDialog(row) {
      this.dialogLoading = true;
      listDetail({ fbatch: row.fbatch,fsiteNo: this.$store.state.user.fsiteNo })
        .then((response) => {
          this.dialogList = response.data.data.list;
          this.dialogLoading = false;
        })
        .catch(() => {
          this.dialogList = [];
          this.dialogLoading = false;
        });

      this.dialogLoading = true;
      this.detailQueryList.fcabname = row.fcabname
      this.detailQueryList.fequipmenttag = row.fequipmenttag
      this.detailQueryList.fgoodno = row.fgoodno
      this.detailQueryList.fgoodname = row.fgoodname
      this.detailQueryList.frfidbarcode = row.frfidbarcode
      this.detailQueryList.fbatch = row.fbatch
      this.detailVisible = true;
    },

    //取消弹框
    cancel() {
      this.dialogFormVisible = false;
      this.dataForm = {
        fstockno: undefined,
        fgoodno: undefined,
        fbegqty: undefined,
        frecqty: undefined,
        fretqty: undefined,
        fmovqty: undefined,
        foutqty: undefined,
        finqty: undefined,
        fuseqty: undefined,
        fmrkqty: undefined,
        fbalqty: undefined,
      };
    },
    indexMethod(index) {
      index = index + 1;
      return index;
    },
    indexMethodDetail(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>